<template>
  <el-header>
    <h1>设置</h1>
  </el-header>

  <el-row justify="center">
    <el-col :span="12">
      <el-form label-width="100px" class="settings-form">
        <el-form-item label="头像">
          <el-input v-model="imageUrl"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="username" ></el-input>   
        </el-form-item>
          <el-form-item label="简介">
            <el-input type="textarea" v-model="bio" ></el-input>
          </el-form-item>
        <el-form-item label="电子邮件">
          <el-input v-model="email" ></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="password" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" block>保存</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script setup>
const imageUrl = "https://api.realworld.io/images/smiley-cyrus.jpeg";
const username = "小宝快跑";
const email = "945929939@qq.com";
const password = "••••••••";
const bio = "";
</script>

<style scoped>
.settings-form {
  max-width: 800px;
}
/* 设置el-header样式 */
.el-header {
  height: 150px; /* 设置一个明确的高度，可以根据需要调整 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
</style>